<template>
	<view class="common-login">
		<view class="head">
			<view class="head_bg">
				<view class="head_inner_bg">
					<image style="height: 65px;" :src="imgInfo.head" class="head_logo" />
				</view>
			</view>
		</view>
		<!-- 手机号验证码登录 -->
		<view class="form" v-if="isPhonelogin">
			<view class="input">
				<input type="number" v-model="phoneNo" placeholder="请输入手机号" maxlength="11" focus />
				<view class="img" v-show="phoneNo.length>0">
					<image class="img_del" :src="imgInfo.icon_del" />
				</view>
			</view>
			<view class="code">
				<input type="number" v-model="code" placeholder="请输入验证码" maxlength="4" />
				<button type="primary" plain="" @click="verCode()">获取验证码</button>
			</view>
		</view>
		<!-- 账号密码登录 -->
		<view class="form" v-if="!isPhonelogin">
			<view class="input">
				<input type="number" v-model="phoneNo" placeholder="请输入手机号" maxlength="11" focus />
				<view class="img" v-show="phoneNo.length>0">
					<image class="img_del" :src="imgInfo.icon_del" />
				</view>
			</view>
			<view class="code">
				<input type="password" v-model="password" placeholder="请输入密码" maxlength="20" />
			</view>
		</view>

		<view class="tip" v-show="isPhonelogin">
			<text>没有贝思客账号的手机号会自动完成注册</text>
		</view>
		<!-- 登录提交 -->
		<button class="submit" type="primary" @tap="loginNow">立即登录</button>

		<view class="transte-other" @click="transteOtherLogin()">
			<text>{{transteText}}</text>
		</view>
		
		<vercode ref="vercode" :contentHeight="480"></vercode>
	</view>
</template>

<script>
	import localStorage from '@/common/localstorage/localstorage.js'
	import vercode from '@/components/vercode/index.vue'
	export default {
		components: {
			vercode
		},
		data() {
			return {
				phoneNo: '',
				password: '',
				code: '',
				isPhonelogin: true,
				wantJumpurl: '',
				imgInfo: {
					head: '/static/login/head.png',
					icon_del: '/static/login/icon_del.png',
					icon_pwd_switch: '/static/login/icon_pwd_switch.png'
				},
				transteText: '切换至普通登录'
			}
		},
		onShow() {
			console.log(1)
			this.$setTitle("Happy先生·登录")
		},
		onLoad(options) {
			if(options.jiangyuang){//接受传过来的参数
				console.log(options.jiangyuang)
			}
			console.log(options)
			this.wantJumpurl = decodeURIComponent(options.redirect);
		},
		methods: {
			transteOtherLogin() {
				this.isPhonelogin = !this.isPhonelogin;
				if (!this.isPhonelogin) {
					this.transteText = '切换至手机号登录'

				} else {
					this.transteText = '切换至普通登录'
				}
			},
			verCode(){
				this.$refs.vercode.toggleMask();
			},
			getPhonecode() {

			},
			loginNow() {
				let phone = this.phoneNo,
					code = this.code,
					pwd = this.password,
					codelogin = false,_this=this;
				if (!/^1[2|3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(phone)) {
					return uni.showToast({
						title: '手机号格式错误',
						mask: true,
						duration: 1500,
						icon:'none'
					});
				}
				if (this.isPhonelogin) {
					codelogin = true;
					if (code.length != 4) {
						return uni.showToast({
							title: '请输入手机验证码',
							mask: true,
							duration: 1500,
							icon:'none'
						});
					}
				} else if (pwd.length == 0 || pwd.length > 20) {
					return uni.showToast({
						title: '密码错误',
						mask: true,
						duration: 1500,
						icon:'none'
					});
				}
				uni.showLoading({
					title: '请稍等...'
				})

				this.$request.post('/client.ashx', {
					data: {
						c: "User",
						m: "Login",
						phone: phone,
						pwd: pwd,
						code: code,
						types: !codelogin?1:0
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					}
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					
					let dt =res.data;
					if (dt.Status == "ok") {
						let user = {};
						user.userid = dt.Tag.Uid;
						user.sessionid = dt.Tag.SessionId;
						user.jzb = dt.Tag.Money;
						user.exp = dt.Tag.Exp;
						user.phone = dt.Tag.Phone;
						user.levels = dt.Tag.Levels;
						user.headimg = dt.Tag.HeadImgPath;
						
						let p = {
							key: 'userinfokey',
							jsonstr:user
						}
						localStorage.setStorage(p);
						
						let wantJumpurl = _this.wantJumpurl;
						uni.redirectTo({
							url:wantJumpurl
						})
					}
					else{
						return uni.showToast({
							title: dt.Msg,
							mask: true,
							duration: 1500,
							icon:'none'
						})
					}

				}).catch(error => {
					uni.hideLoading()
					
					console.log(error)
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	page {
		height: auto;
		min-height: 100%;
		background-color: #fff;
	}

	.common-login {
		$logo-padding: 60upx;
		$form-border-color: #26cad3;
		$form-input-height: 70upx;

		.page_login {
			padding: 20upx;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: $logo-padding;
			padding-bottom: 0;

			.head_bg {
				border-radius: 100upx;
				width: 200upx;
				height: 200upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.head_inner_bg {
					border-radius: 80upx;
					width: 160upx;
					height: 160upx;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					overflow: hidden;
				}
			}
		}

		.form {
			display: flex;
			margin: 40upx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			color: #333;

			.code {
				width: 100%;
				height: $form-input-height;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				input {
					width: 100%;
					outline: none;
					height: $form-input-height;
					border: 1px solid $form-border-color;
					border-radius: 10upx;
					padding-left: 20upx;

					&:focus {
						outline: none;
					}
				}

				button {
					width: 300upx;
					height: $form-input-height;
					line-height: $form-input-height;
					font-size: 24upx;
					color: #26cad3;
					border: 1px solid $form-border-color;
					margin-left: 20upx;
				}
			}

			.input {
				width: 100%;
				height: $form-input-height;
				margin: 20upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border: 1px solid $form-border-color;
				border-radius: 10upx;

				input {
					outline: none;
					margin-left: 20upx;
					height: 60upx;
					width: 100%;

					&:focus {
						outline: none;
					}
				}

				.img {
					min-width: 80upx;
					min-height: 80upx;
					margin: 10upx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.img_del {
					width: 42upx;
					height: 42upx;
				}

				.img_pwd_switch {
					width: 56upx;
					height: 24upx;
				}

			}
		}

		.submit {
			margin-left: 40upx;
			margin-right: 40upx;
			color: white;
			background-color: $form-border-color;
			-webkit-tap-highlight-color: $form-border-color;

			&:active {
				color: #fff;
				background-color: $form-border-color;
			}
		}

		.tip {
			font-size: 24upx;
			color: #999;
			text-align: left;
			margin: 56upx 40upx 12upx;
		}

		.transte-other {
			font-size: 26upx;
			color: #999;
			text-align: center;
			padding: 0 10upx;
			margin-top: 50upx;

			text {
				border-bottom: 1px solid #999;
			}
		}
	}
</style>
